<template>
    <div class="container">
        <video playsinline autoplay class="video-style"></video>
        <el-select v-model="value" placeholder="请选择" @change="onChange">
            <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
        </el-select>
        <el-button type = 'primary' round @click="takephoto" class="button-style">拍照</el-button>
        <canvas class="canvas-style"></canvas>
    </div>
</template>

<script>
export default {
    name: 'ChatroomWebTakePhoto',

    data() {
        return {
          pic:require('@/assets/logo.png'), 
          constraints:{
            audio: false,
            video: true
            },
          video:null,
          value: '',
          canvas:null,
            options: [{
            value: 'none',
            label: 'None'
            }, {
            value: 'blur',
            label: 'Blur'
            }, {
            value: 'grayscale',
            label: 'Grayscale'
            }, {
            value: 'invert',
            label: 'Invert'
            }, {
            value: 'sepia',
            label: 'Sepia'
            }],
        };
    },

    mounted() {
        this.getUserMediaPower();
    },

    methods: {
         getMessage(){
            this.video = document.querySelector("video");
            this.canvas = window.canvas = document.querySelector('canvas');
            this.canvas.width = this.video.videoWidth;
            this.canvas.height = this.video.videoHeight;
        },
        getUserMediaPower(){
            this.getMessage();
            navigator.mediaDevices.getUserMedia(this.constraints).then(this.handleSuccess).catch(this.handleError);
        },
        takephoto(){
            this.canvas.width = this.video.videoWidth;
            this.canvas.height = this.video.videoHeight;
            this.canvas.className = this.value;
            this.canvas.getContext('2d').drawImage(this.video, 0, 0, this.canvas.width, this.canvas.height);
        },
        handleSuccess(stream) {
            window.stream = stream; // make stream available to browser console
            this.video.srcObject = stream;
        },
        handleError(error) {
            console.log('navigator.MediaDevices.getUserMedia error: ', error.message, error.name);
        },
        onChange(){
            // console.log(this.value)
            this.video.className = this.value;
        }
    },
};
</script>

<style lang="scss" scoped>
.container{
    display: inline;
}
.video-style{
    border: 1px solid #ccc;
    // display: flex;
    width:640rpx;
    height:640rpx;
}
.button-style{
    text-align: center;
    align-items: center;
}
.canvas-style{
    border: 1px solid rgb(255, 0, 0);
    // display: flex;
}
.none {
    -webkit-filter: none;
    filter: none;
}

.blur {
    -webkit-filter: blur(3px);
    filter: blur(3px);
}

.grayscale {
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
}

.invert {
    -webkit-filter: invert(1);
    filter: invert(1);
}

.sepia {
    -webkit-filter: sepia(1);
    filter: sepia(1);
}
</style>